<template>
  <transition name="product"> <!-- 这边的动画效果有问题，进入商品详情页没有动画显示，返回home页面就有动画显示，不知道问题在哪里? 下面引入子组件传入参数productId,和触发loaded事件我在每一个子组件都设置了，我觉得有点繁琐，老师有更简洁的思路吗？-->
    <div class="product">
      <header class="g-header-container">
        <product-header></product-header>
      </header>
      <me-scroll ref="scroll">
        <product-slider :productId="productId" @loaded="updateScroll"></product-slider>
        <div>
          <me-loading v-if="!productId"/>
          <product-detail :productId="productId" @loaded="updateScroll"></product-detail>
          <product-evaluate :productId="productId" @loaded="updateScroll"></product-evaluate>
          <product-shop :productId="productId" @loaded="updateScroll"></product-shop>
        </div>
      </me-scroll>
      <div class="g-footer-container">
        <foot-tabbar></foot-tabbar>
      </div>
    </div>
  </transition>
</template>

<script>
  import MeLoading from 'base/loading';
  import ProductHeader from './header';
  import ProductSlider from './slider';
  import ProductDetail from './detail';
  import ProductEvaluate from './evaluate';
  import ProductShop from './shop';
  import FootTabbar from '../../components/foottabbar';
  import MeScroll from 'base/scroll';
  export default {
    name: 'Product',
    data() {
      return {
        productId: this.$route.params.id + ''
      };
    },
    components: {
      MeLoading,
      ProductHeader,
      ProductSlider,
      ProductDetail,
      ProductEvaluate,
      ProductShop,
      FootTabbar,
      MeScroll
    },
    created() {
      console.log('接收商品id成功:' + this.$route.params.id);
    },
    methods: {
      updateScroll() {
        this.$refs.scroll.update();
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";
  .product {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: $product-z-index;
    width: 100%;
    height: 100%;
    background-color: #eee;
    padding-bottom: 100px;
  }

  .product-enter-active,
  .product-leave-active {
      transition: all 0.3s;
  }

  .product-enter,
  .product-leave-to {
     transform: translate3d(100%, 0, 0);
  }
</style>
